<template>
    <!--账户中心的表格-->
    <div>
      <!--tab切换-->
      <div class="l-account-tab">
        <div @touchstart="changeActive(index)" v-for="(tabItem,index) in tabList" class="l-account-item" :class='[index === active ? "l-tab-active" : ""]'>
            {{tabItem.name}}
        </div>
      </div>

      <!--表格-->
      <div class="l-table">
        <!--表头-->
        <div class="l-table-header">
          <div v-for="(headerItem, index) in headerList " class="l-header-item">
            {{headerItem.col}}
          </div>
        </div>
        <!--数据列-->
        <div v-for="item in recodeList" class="l-table-cols">
          <div class="l-col-item">
            {{item.phone}}
          </div>
          <div class="l-col-item">
           {{item.ebcMoneyAddress}}
          </div>
          <div class="l-col-item">
            {{item.coin}}
          </div>
          <div class="l-col-item">
            {{item.createDate | formdata}}
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import api from '@/api/login'
  import {mapActions, mapState} from 'vuex'
    export default {
        name: "ltable",
        props: {
          tabList: {
            default: () => {
              return [
                {
                  name: "获赠记录"
                },
                {
                  name: "转赠记录"
                },
                {
                  name: "提取记录"
                }
              ]
            }
          },
          headerList: {
            default: () => {
              return [
                {
                  col: "转赠人手机号码"
                },
                {
                  col: "转赠地址",
                  width: 300
                },
                {
                  col: "获赠数量"
                },
                {
                  col: "获赠时间"
                }
              ]
            }
          }
        },
      data () {
          return {
            active: 0,
            recodeList: []
          }
      },
      computed: {
        ...mapState(['person'])
      },
      mounted () {
        let formdata = new FormData
        formdata.append("genre", 0)
        formdata.append("current", 1)
        formdata.append("id", this.person.userInfo.id)
        api.post("user/givenRecord", formdata, {isToken: true}).then(res => {
          // console.log(res.peCoinInOutLogs.records)
          this.recodeList = res.peCoinInOutLogs.records
        })
      },
      methods: {
        changeActive (index) {
          this.active = index
          let formdata = new FormData
          this.$emit("updateHeader", index)
          formdata.append("current", 1)
          formdata.append("id", this.person.userInfo.id)
          if(index === 0) {
            formdata.append("genre", 0)
            api.post("user/givenRecord", formdata, {isToken: true}).then(res => {
              // console.log(res.peCoinInOutLogs.records)
              this.recodeList = res.peCoinInOutLogs.records
            })
          } else if (index === 1) {
            formdata.append("genre", 1)
            api.post("user/givenRecord", formdata, {isToken: true}).then(res => {
              // console.log(res.peCoinInOutLogs.records)
              this.recodeList = res.peCoinInOutLogs.records
            })
          } else if (index === 2) {
            api.post("user/peExtract/givenRecord", formdata, {isToken: true}).then(res => {

              res.peCoinExtractLogs.records.forEach((item, index) => {
                item['ebcMoneyAddress'] = item.ebcOnlineMoneyAddress
              })
              this.recodeList = res.peCoinExtractLogs.records
            })
          }
        }
      },
      filters: {
        formdata (val) {
          let date = new Date(val)
          return date.getFullYear() + "/"+(date.getMonth()+1)+"/"+date.getDate()
        }
      }
    }
</script>

<style lang="less" scoped>
  .l-account-tab {
    display: flex;
    border-top: 1px solid #986d33;
    font-size: 32px;
    color: #986d33;

    .l-account-item {
      /*width: 170px;*/
      text-align: center;
      height: 70px;
      line-height: 70px;
      padding: 10px;
      border-bottom: 1px  solid #986d33;
    }



    .l-account-item:nth-child(n+1).l-tab-active {
      border-bottom: none;
      border-right: 1px solid #986d33;
      border-left: 1px solid #986d33;
    }

    .l-account-item:first-child.l-tab-active {
      border-bottom: none;
      border-right: 1px solid #986d33;
      border-left: none;
    }

    .l-account-item:last-child {
      flex-grow: 2;
    }

    .l-account-item:last-child.l-tab-active {
      border-right: none;
    }
  }

  .l-table-header {
    width: 100%;
    background-color: #f0f0f0;
    display: flex;
    border-bottom: 1px solid #986d33;
    font-size: 28px;


    .l-header-item {
      /*width: 170px;*/
      padding: 10px;
      text-align: center;
      color: #986d33;
      height: 100px;
      line-height: 100px;
    }

    .l-header-item:last-child {
      flex-grow: 2;
    }
  }

  .l-table-cols {
    display: flex;
    color: #986d33;
    border-bottom: 1px solid #986d33;
    font-size: 28px;


    .l-col-item {
      width: 170px;
      text-align: center;
      color: #000;
      height: 100px;
      line-height: 100px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }

    .l-color-red.l-col-item {
      color: red;
    }

    .l-color-green.l-col-item {
      color: green;
    }

    .l-col-item:last-child {
      flex-grow: 2;
    }
  }
</style>
